<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //立即调用
        //定义一个HttpRequestUtil类 用于封装http请求
        (async () => {
            class HttpRequestUtil {
                //异步get请求
                async get(url, timeout = 5000, headers = {}) {
                    const controller = new AbortController();
                    const id = setTimeout(() => controller.abort(), timeout);
                    try {
                        const res = await fetch(url, {
                            headers: headers,
                            signal: controller.signal
                        }); //发起get请求
                        clearTimeout(id);
                        if (!res.ok) {//res.ok 是一个布尔值，表示 HTTP 响应是否成功,200-299 范围内时为 true
                            throw new Error(`HTTP error! Status: ${res.status}`);//返回错误状态码
                        }
                        const data = await res.json(); //解析返回的json数据
                        return data; //返回数据
                    } catch (error) {
                        if (error.name === 'AbortError') {
                            throw new Error('Request timed out');
                        } else {
                            console.error('Error fetching data for GET request: ', error);
                            throw error;
                        }
                    }
                }
                //异步post请求
                async post(url, data, timeout = 5000, headers = {}) {
                    try {
                        const controller = new AbortController();
                        const id = setTimeout(() => controller.abort(), timeout);
                        const res = await fetch(url, { //发起post请求
                            method: "POST", //指定请求方法
                            headers: {},
                            body: JSON.stringify(data), //将传入的数据转为JSON字符串作为请求体
                            signal: controller.signal
                        });
                        if (!res.ok) {
                            throw new Error(`HTTP error! Status: ${res.status}`);//返回错误状态码
                        }
                        const result = await res.json(); //同上
                        return result;
                    } catch (error) {
                        if (error.name === 'AbortError') {
                            throw new Error('Request timed out');
                        } else {
                            console.error('Error fetching data for GET request: ', error);
                            throw error;
                        }
                    }
                }
                //异步put请求
                async put(url, data, timeout = 5000, headers = {}) {
                    const controller = new AbortController();
                    const id = setTimeout(() => controller.abort(), timeout);
                    try {
                        const res = await fetch(url, { //发起post请求
                            method: "PUT", //指定请求方法
                            headers: {},
                            body: JSON.stringify(data), //将传入的数据转为JSON字符串作为请求体
                            signal: controller.signal
                        });
                        if (!res.ok) {
                            throw new Error(`HTTP error! Status: ${res.status}`);//返回错误状态码
                        }
                        const result = await res.json(); //同上
                        return result;
                    } catch (error) {
                        if (error.name === 'AbortError') {
                            throw new Error('Request timed out');
                        } else {
                            console.error('Error fetching data for GET request: ', error);
                            throw error;
                        }
                    }
                }
                //异步delete请求
                async delete(url, id, timeout = 5000, headers = {}) {
                    const controller = new AbortController();
                    const tid = setTimeout(() => controller.abort(), timeout);
                    try {
                        const res = await fetch(`${url}/${id}`, { //发起delete请求
                            method: "DELETE", //指定请求方法
                            headers: {},
                            signal: controller.signal
                        });
                        clearTimeout(tid);
                        if (!res.ok) {
                            throw new Error(`HTTP error! Status: ${res.status}`);//返回错误状态码
                        }
                        const result = await res.json(); //同上
                        return result;
                    } catch (error) {
                        if (error.name === 'AbortError') {
                            throw new Error('Request timed out');
                        } else {
                            console.error('Error fetching data for GET request: ', error);
                            throw error;
                        }
                    }
                }
            }
            const httpRequestUtil = new HttpRequestUtil();
            //发送请求并打印
            const res = await httpRequestUtil.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json');
            console.log(res);
        })()
    </script>
</body>

</html>